<!-- 个人中心 -->
<template>
	<view class="container">
		<view class="order-nav u-flex">
			<view class="nav-item u-flex-col u-flex-1 u-row-center u-col-center" v-for="nav in groupState" :key="nav.id"
				@tap="onNav(nav.id)">
				<view class="item-title" :class="{ 'item-title-active': stateId === nav.id }">{{ nav.title }}</view>
				<text class="nav-line" :class="{ 'line-active': stateId === nav.id }"></text>
			</view>
		</view>
		<view class="order-data">
			<view v-if="stateId === 1">
				<view class="grid col-2 ">
					<view class="data-item" v-for="(item,index) in dataList"
						@click="goPage('pages/jewel/trainDetail?id='+item.id)">
						<view class="bj" :style="{'background-image': 'url('+item.img_main+')'}">
							<view>
								<!-- <image style="width: 336rpx;height: 280rpx;" :src="'https://xckj-auto-file-res.oss-cn-shenzhen.aliyuncs.com/'+item.img_main"></image> -->
								<view class="title">{{item.title}}</view>
								<!-- <view class="qi">{{item.qi}}</view> -->
							</view>
						</view>
						<view class="xia">
							<view class="name">{{item.title}}</view>
							<view class="ti">主讲导师： {{item.user_name}}</view>
							<view class="ti">{{item.introduce}}</view>
							<view class="ti">开课时间： {{item.star_time}}</view>
							<view class="bm" @click="goPage('/pages/jewel/signup?id=' + item.id)">立即报名</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="stateId === 6">
				<view class="grid col-2 ">
					<view class="data-item" v-for="(item,index) in dataList">
						<view class="avatar">
							<image style="width: 100%;;height: 400rpx;" :src="item.img_main"></image>
						</view>
						<view class="person-name">{{item.user_name}}</view>
						<view class="person-diwei">{{item.introduce?item.introduce:''}}</view>
					</view>
				</view>
			</view>
			<view v-if="stateId ===3">
				
				<view style="margin:20rpx 0;" >
						<u-parse :html="dataList[0].info" :tag-style="vuex_parse_style" :domain="'https://huboshizb.bigchun.com'"
						 @linkpress="diylinkpress"></u-parse>
				</view>
				
				<!-- <view style="border: 1px solid #EEEEEE;margin-bottom: 20rpx;"></view>
				
				<text>为了深入贯彻落实《中共中央国务院》，招生简章是介绍学校基本情况，是学生了解该学校和进行报考的重要依据，是一种较为可信的院校信息。简章中会有学校所开设的课程、报考条件，报考日程，联系方式等。在招生宣传中，招生学校必须将名称、地址、类别、层次、专业、颁发何种学历证书等事项，按照审批机关审批的内容加以规范。
				</text>
				<text>第一章 组织机构
				</text>
				<text>
					第一条 学校成立高素质复合型硕士层次高中教师培养试点，以下简称复硕培养试点，招生工作小组，负责该招生工作的协调、指导和监督，并对重大事宜做出决策。

					第二条 学校成立高素质复合型硕士层次高中教师培养试点，以下简称复硕培养试点，招生工作小组，负责该招生工作的协调、指导和监督，并对重大事宜做出决策。

					第三条 学校成立高素质复合型硕士层次高中教师培养试点，以下简称复硕培养试点，招生工作小组，负责该招生工作的协调、指导和监督，并对重大事宜做出决策。

					第四条 学校成立高素质复合型硕士层次高中教师培养试点，以下简称复硕培养试点，招生工作小组，负责该招生工作的协调、指导和监督，并对重大事宜做出决策。</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		filters: {
			formatTime(val) {

				const date = new Date(val * 1000)
				var y = date.getFullYear() // 年份
				var m = date.getMonth() + 1 // 月份，注意：js里的月要加1
				var d = date.getDate() // 日
				// 返回值，根据自己需求调整，现在已经拿到了年月日时分秒了 
				return y + '-' + m + '-' + d
			}
		},
		data() {
			return {
				groupState: [{
						id: 1,
						title: '培训活动'
					},
					{
						id: 6,
						title: '培训教师	'
					},
					{
						id: 3,
						title: '招生简章'
					}

				],
				stateId: 1,
				dataList: [
					// {
					// 	id: 0,
					// 	img: '../../static/image/zb1.png',
					// 	title: '翡翠鉴定课程',
					// 	qi: '第三期',
					// 	name: '翡翠鉴定课程第三期',
					// 	daoshi: '王刚',
					// 	kuadu: '全程跨度3个月',
					// 	time: '2021年5月10日'
					// },
					// {
					// 	id: 1,
					// 	img: '../../static/image/zb2.png',
					// 	title: '翡翠鉴定课程',
					// 	qi: '第三期',
					// 	name: '翡翠鉴定课程第三期',
					// 	daoshi: '王刚',
					// 	kuadu: '全程跨度3个月',
					// 	time: '2021年5月10日'
					// },
					// {
					// 	id: 2,
					// 	img: '../../static/image/zb3.png',
					// 	title: '翡翠鉴定课程',
					// 	qi: '第三期',
					// 	name: '翡翠鉴定课程第三期',
					// 	daoshi: '王刚',
					// 	kuadu: '全程跨度3个月',
					// 	time: '2021年5月10日'
					// },
					// {
					// 	id: 3,
					// 	img: '../../static/image/zb4.png',
					// 	title: '翡翠鉴定课程',
					// 	qi: '第三期',
					// 	name: '翡翠鉴定课程第三期',
					// 	daoshi: '王刚',
					// 	kuadu: '全程跨度3个月',
					// 	time: '2021年5月10日'
					// },
				],
				personList: [
					// {
					// 	id: 0,
					// 	img: '../../static/image/zb7.png',
					// 	name: '史洪岳',
					// 	diwei:'中国珠宝玉石首饰行业协会史洪岳秘书长'
					// },
					// {
					// 	id: 1,
					// 	img: '../../static/image/zb8.png',
					// 	name: '徐德明',
					// 	diwei:'中国珠宝玉石首饰行业协会史徐德明会长'
					// },
					// {
					// 	id: 2,
					// 	img: '../../static/image/zb9.png',
					// 	name: '杨晓华',
					// 	diwei:'中国珠宝玉石首饰行业协会史洪岳秘书长'
					// },
					// {
					// 	id: 3,
					// 	img: '../../static/image/zb10.png',
					// 	name: '史洪岳',
					// 	diwei:'中国珠宝玉石首饰行业协会史洪岳秘书长'	
					// },
				]
			};

		},
		onLoad() {
			this.gettrain()
		},
		onShow() {

		},
		computed: {

		},
		methods: {
			onNav(id) {
				if (this.stateId !== id) {
					this.stateId = id;
				}
				this.gettrain()
			},
			baoming(item) {
				console.log('item', item)
				uni.navigateTo({
					url: '/pages/jewel/signup?id' + item.id
				})
			},
			//培训活动
			gettrain() {
				this.$api.trainList({
					type: this.stateId
				}).then(res => {
					console.log('res', res)
					if (res.code == 1) {
						this.dataList = res.data
						
						// this.dataList.forEach((item, index) => {
						// 	if (item.createtime != null) {
						// 		item.createtime = this.$util.tsFormatTime(item.createtime * 1000, "Y年M月D日")
						// 	}
						// })
						
						console.log('333', this.dataList)
					}
				});
			},
		},
	}
</script>
<style lang="scss" scoped>
	page {
		height: 100% !important;
		min-height: 100% !important;
		background: #F5F5F5;
	}

	.container {
		// background: #F5F5F5;
		// height: 100vh;
	}

	.order-nav {
		background: #fff;
		height: 80rpx;

		.nav-item {
			flex: 1;

			.item-title {
				font-size: 32rpx;
				font-weight: 400;
				color: #666666;
				line-height: 76rpx;
			}

			.item-title-active {
				color: #333333;
				font-weight: bold;
			}

			.nav-line {
				width: 80rpx;
				height: 4rpx;
				background: #fff;


			}

			.line-active {
				background: #DE2415;
			}
		}
	}

	.order-data {
		padding: 30rpx;
		padding-top: 10rpx;
	}

	.bj {
		background-size: 100% 100%;
		// width: 336rpx;
		height: 280rpx;
		// background-image: url('/static/image/zb6.png');
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.margin-bottom {
		margin-bottom: 30rpx;
	}

	.text-center {
		text-align: center;
	}

	.grid.col-2>view {
		width: 48%;

	}

	.padding {
		padding: 30rpx;
	}

	.grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.title {
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		color: #FFFFFF;
		text-align: center;
	}

	.qi {
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		color: #FFFFFF;
		text-align: center;
		margin-top: 20rpx;
	}

	.xia {
		margin-top: 26rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 32rpx;
		display: flex;
		flex-direction: column;
	}

	.name {
		font-size: 30rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.ti {
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-top: 10rpx;
	}

	.data-item {
		margin-top: 20rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		background: #FFFFFF;
		height: 588rpx;
	}

	.bm {
		height: 48rpx;
		background: #FF2C2C;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 16rpx;
	}

	.person-name {
		font-size: 30rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		margin-top: 26rpx;
		margin-left: 20rpx;
	}

	.person-diwei {
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		margin-top: 14rpx;
		margin-left: 20rpx;
	}
</style>